<template>
	<view class="box" hover-class="hoverBox">
		<view class="child" hover-class="hoverChild" hover-stop-propagation></view>
	</view>
	<text selectable>可选  空格</text>
	<scroll-view class="scrollView">
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
		<view>子元素</view>
	</scroll-view>
	<swiper indicator-dots indicator-active-color="red" indicator-color="#007aff">
		<swiper-item>123</swiper-item>
		<swiper-item>459</swiper-item>
		<swiper-item>789</swiper-item>
		<swiper-item>000</swiper-item>
	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.box {
		width: 200px;
		height: 200px;
		background-color: #ccc;
	}
	.child {
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
	.hoverBox {
		background-color: red;
	}
	.hoverChild {
		background-color: black;
	}
	
	.scrollView {
		width: 300px;
		height: 220px;
		border: 1px red solid;
		display: flex;
		flex-wrap: nowrap;
		view {
			width: 100px;
			height: 100px;
			display: inline;
		}
	}
</style>
